Release 10.1A: OpenEdge Development:
Progress 4GL Handbook

Using images to display pictures

An image object represents an area on a frame into which you can load an image file from disk. This can be an image in the bitmap (.bmp) or Jpeg (.jpg) format.

To add an image to the window:

Select the Image icon from the Palette:



Drop the image onto the design window to the right of the browse and shape it to be roughly the height of the browse.

The image area displays a default black-and-white image just so you can see how large it is, until you load a specific image into it.

Double-click on the image to bring up its property sheet.
Name it ItemImage.

You’re going to use the image to display a picture of one of the Items in the Sports2000 database.

To show each image properly within whatever space you’ve allocated to it, you can select two attributes that will adjust it as needed.

Check on the Stretch-to-Fit toggle box. This option expands or contracts the image to fit the space.
Check on the Retain-Shape toggle box. This option retains the overall ratio of height to width of the image as its size is changed to fit the space:

Each Order displayed for a Customer can have one or many Order Lines. Each of these Order Lines is for a specific Item the Customer has ordered. Since there isn’t room in this simple test window to show all the Order Lines for each Order along with the Item information, you’ll just show the Item image for the first Order Line for the currently selected Order.

There’s an image file in the sports2000/images directory for each Item in the item catalog of the Sports2000 database. The name of the file is cat plus the item number as a five-digit number, with the .jpg extension. To load the image into the image object area in the window, you use the LOAD-IMAGE method.

To find the right item to display and load its image:

Add these three lines of code to the end of the VALUE-CHANGED trigger for the Order browse:

FIND FIRST Orderline OF Order. FIND Item OF Orderline.   /* No need for FIRST because there’s just one item. */ ItemImage:LOAD-IMAGE('src/sports2000/images/cat' +                      STRING(Item.ItemNum, '99999') + '.jpg').

Save and Run the window once more.

Each time you select a different Order, either by selecting a row in the browse or switching to a different Customer, a new image should appear: